import React from "react";
import styled from "styled-components";
// Components
import PricingTable from "../Elements/PricingTable";

export default function Pricing() {
  return (
    <Wrapper id="pricing">
      <div className="whiteBg">
        <div className="container">
          <HeaderInfo>
            <h1 className="font40 extraBold">三大荔枝品种</h1>
            <p className="font13">
              荔枝的品种多样，每种品种都有其独特的风味和口感特征。例如，桂味、仙进奉和井岗红糯这三种品种的荔枝主要累积糖分，属于糖分均衡累积型品种；而妃子笑和糯米糍则主要为还原糖和蔗糖累积型品种。此外，从氨基酸含量来看，各品种之间也存在着显著的差异。例如，所有的荔枝品种中，最主要的游离氨基酸为γ-氨基丁酸 (GABA)或丙氨酸 (Ala)。在甜味贡献中，果糖的作用最大，同时氨基酸中以Ala、谷氨酸 (Glu)和缬氨酸 (Val)对甜味、鲜味和苦味的贡献最大，酒石酸则是酸味的最大贡献者，GABA对涩味贡献极大。
              <br />
              不过，评价荔枝品种的优劣并非仅仅看其糖度和口感，果实重量、果核大小以及可食率等都是消费者评价荔枝品质的重要指标。因此，对于不同的荔枝品种，我们不能单一地从其糖度和口感来一概而论其好坏，而需要结合各种因素进行综合考量。
            </p>
          </HeaderInfo>
          <TablesWrapper className="flexSpaceNull">
            <TableBox>
              <PricingTable
                icon="browser"
                // price="$29,99"
                title="桂味荔枝"
                text="果实中等大小，呈球形，果壳薄脆，颜色为浅红色。龟裂片突起呈不规则圆锥形，片锋尖锐刺手，从蒂膊两旁绕果顶一周，有较深的环线沟，裂纹和缝合线明显。这种荔枝有桂花香味，果核大小不一。"
                offers={[
                  { name: "果肉呈乳白色", cheked: true },
                  { name: "口感细腻", cheked: true },
                  { name: "甜而不腻", cheked: true },
                  { name: "香气浓郁", cheked: true },
                  { name: "果实相对较小", cheked: true },
                ]}
              // action={() => alert("clicked")}
              />
            </TableBox>
            <TableBox>
              <PricingTable
                icon="browser"
                // price="$49,99"
                title="妃子笑荔枝"
                text="具有中大果实，近圆形或卵圆形。果皮颜色为暗红色或褐色。龟裂片平坦或微隆起，排列规则，裂纹和缝合线明显。果肉口感软糯多汁，味道清甜带香。"
                offers={[
                  { name: "果肉厚实", cheked: true },
                  { name: "口感饱满", cheked: true },
                  { name: "味道清甜带有微香", cheked: true },
                  { name: "果实也较小", cheked: true },
                  { name: "近圆形或卵圆形", cheked: true },
                ]}
              // action={() => alert("clicked")}
              />
            </TableBox>
            <TableBox>
              <PricingTable
                icon="browser"
                // price="$39,99"
                title="糯米糍荔枝"
                text="果实上大下小，呈扁心形，个头大且颜色鲜亮。龟裂片大而隆起，片峰平滑无刺，果肩一边显著隆起，蒂部略凹，果顶浑圆。肉质厚实且核小。"
                offers={[
                  { name: "果肉呈透明状", cheked: true },
                  { name: "口感软糯", cheked: true },
                  { name: "味道甘甜", cheked: true },
                  { name: "香气浓郁", cheked: true },
                  { name: "呈扁心形", cheked: true },
                ]}
              // action={() => alert("clicked")}
              />
            </TableBox>
          </TablesWrapper>
        </div>
      </div>
    </Wrapper>
  );
}

const Wrapper = styled.section`
  width: 100%;
  padding: 50px 0;
`;
const HeaderInfo = styled.div`
  margin-bottom: 50px;
  @media (max-width: 860px) {
    text-align: center;
  }
`;
const TablesWrapper = styled.div`
  @media (max-width: 860px) {
    flex-direction: column;
  }
`;
const TableBox = styled.div`
  width: 31%;
  @media (max-width: 860px) {
    width: 100%;
    max-width: 370px;
    margin: 0 auto
  }
`;




